<template>
  <div class>
    <mt-header v-bind:title="msg">
      <router-link to="/blogs" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <mt-navbar v-model="selected">
    <mt-tab-item id="1" @click.native="clickTab()">阵容推荐</mt-tab-item>
    <mt-tab-item id="2" @click.native="clickTab()">物品合成</mt-tab-item>
    <mt-tab-item id="3" @click.native="clickTab()">模拟器</mt-tab-item>
</mt-navbar>

<!-- tab-container -->
<mt-tab-container class="tab-content" v-model="selected">
  <mt-tab-container-item id="1">
    <mt-cell v-for="f in formations" v-bind:key="f.id" :title="f.name"  @click.native="goDetail(f)" value="查看"></mt-cell>
  </mt-tab-container-item>

  <!--物品合成-->
  <mt-tab-container-item id="2">
    <!-- <mt-cell v-for="n in 4" :title="'测试 ' + n" /> -->
    <div class="goods-list">
        <div class="goods-item" v-for="(f,k) in goods.title" v-bind:key="k" :title="f.g_desc"><img :src="f.g_image" class='img' :title="f.g_name"/></div>
    </div>
    <div class="goods-list" v-for="(b,k) in goods.body" v-bind:key="k">
        <div class="goods-item" :title="b.g_desc">
          <img :src="b.info.g_image" class='img' :title="b.info.g_name"/>
        </div>
        <div class="goods-item" v-bind:class="{'goods-repet': g.isrepet}" v-bind:key="k" v-for="(g,k) in b.child" :title="g.gm_desc">
          <img :src="g.gm_image" class='img' :title="g.gm_name"/>
          </div>
    </div>
  </mt-tab-container-item>

  <!--模拟器-->
  <mt-tab-container-item id="3">
    <!-- 羁绊分类s-->
    <mt-navbar class="category" v-model="jobed">
      <mt-tab-item v-for="(h,k) in heroes" v-bind:key="k" :id="h.id">{{h.name}}</mt-tab-item>
    </mt-navbar>
    <!-- 羁绊分类end-->

    <!-- tab-container -->
    <mt-tab-container class="tab-content" v-model="jobed">
      <mt-tab-container-item  v-for="(h,k) in heroes" v-bind:key="k" :id="h.id">

        <!-- 羁绊导航-->
        <mt-navbar v-model="h.model"><!--直接用model变量绑定-->
          <mt-tab-item v-for="(c,k) in h.child" v-bind:key="k" :id="c.id">{{c.trait}}</mt-tab-item>
        </mt-navbar>
        <!-- 羁绊导航end-->

        <!-- tab-container 羁绊导航内容-->
        <mt-tab-container class="tab-content" v-model="h.model">
          <mt-tab-container-item v-for="(c,k) in h.child" v-bind:key="k" :id="c.id">
            <div class="hero-list" >
                <!--英雄-->
                <div class="hero-item" v-for="(s,t) in c.hero" v-bind:key="t" v-on:click="selectHero(s)">{{s.gh_name}}</div>
            </div>
          </mt-tab-container-item>
        </mt-tab-container>
        <!-- tab-container 羁绊导航内容end-->
      </mt-tab-container-item>
    </mt-tab-container>

    <mt-cell title="我的阵容" label="我的模拟阵容" >
      <mt-button size="small" type="primary" @click.native="saveHeroes()">保存阵容</mt-button>
    </mt-cell>
    <div class="hero-list" >
      <div class="hero-item hero-sel" v-for="(h,index) in shareHeros" v-bind:key="index" v-on:click="delHero(index)">{{h.gh_name}}</div>
    </div>
    <mt-cell title="特质" label="4狂野3法师2龙" >
    </mt-cell>
    <mt-cell title="狂野" label="攻速加18%" value="2/6" >
    </mt-cell>
    <mt-cell title="极地" label="冰冻效果加18%" value="2/6" >
    </mt-cell>
  </mt-tab-container-item>
</mt-tab-container>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import { MessageBox } from 'mint-ui';
export default {
  name: "game",
  data() {
    return {
      msg: "云顶之弈",
      formations:[],// 推荐阵容
      goods:[],// 小件
      mergeGoods:[], // 合成的物品
      heroes:[], // 英雄
      selected:'1',
      jobed:'1', // 羁绊分类的model
      race:'1', // 种族
      career:'1', // 职业
      shareHeros:[],
      shareHeroIds:[]
    };
  },
  mounted: function () {
    // `this` 指向 vm 实例
    let that = this;
    this.getFormations();  
  },
  methods: {
    clickTab(){
        console.log(this.selected);
        switch(this.selected){
            case '1':
                break;
            case '2':
                console.log('tt',this.goods.length==0);
                if(this.goods.length==0){
                    console.log('goods');
                    this.getGoods();        
                }
                break;
            case '3':
              if(this.heroes.length==0){
                  console.log('heroes');
                  this.getHeros();        
              }
                break;
            default:;
        }
    },
    next() {
      console.log(this.title);
      return true;
    },
    // 获取推荐
    getFormations(){
        // `this` 指向 vm 实例
        let that = this;
        //let id = this.$route.query.id;
        this.$http({
        method: 'get',
        url: 'http://api.lb.com/api/game/recommend_formation',
        data: {
            name: 'wise',
            info: 'wrong'
        }
        }).then(function(response) {
            if(response.status == 200 && response.data){
            let formations = response.data.data;
            that.formations = formations;
            console.log(22)
        }
        // console.log(response.data);
        // console.log(response.status);
        // console.log(response.statusText);
        // console.log(response.headers);
        // console.log(response.config);
        });
    },
    // 获取小件
    getGoods(){
        let that = this;
        this.$http({
            method: 'get',
            url: 'http://api.lb.com/api/game/goods_merge',
            data: {
                name: 'hello',
                info: 'test'
            }
        }).then(function(response) {
            if(response.status == 200 && response.data){
                let goods = response.data.data;
                that.goods = goods;
                console.log(goods)
            }
        });
    },
    //获取英雄
    getHeros(){
        let that = this;
        this.$http({
            method: 'get',
            url: 'http://api.lb.com/api/game/hero_merge',
            data: {
                name: 'hello',
                info: 'test'
            }
        }).then(function(response) {
            if(response.status == 200 && response.data){
                let heroes = response.data.data;
                that.heroes = heroes;
                console.log(heroes)
            }
        });
    },
    selectHero(s){
      console.log('hero', s);
      if(this.shareHeroIds.indexOf(s.gh_id) > -1){
        Toast({
          message: '该英雄已存在',
          position: 'bottom',
          duration: 3000
        });
        return false;
      }
      this.shareHeroIds.push(s.gh_id);
      this.shareHeros.push(s);
    },
    delHero(index){
      this.shareHeroIds.splice(index,1); // 删除
      this.shareHeros.splice(index,1);
    },
    saveHeroes(){
      let heroes = this.shareHeroIds;
      if(heroes.length < 5){
       // alert('未选择英雄或英雄选择人数少于5人');
       Toast({
          message: '未选择英雄或英雄选择人数少于5人',
          position: 'bottom',
          duration: 3000
        });
        return false;
      }
      this.$http({
            method: 'post',
            url: '/apiurl/game/save_formation', // 使用webpack代理配置访问
            data: {
                heroes: heroes,
            }
        }).then(function(response) {
            console.log(response);
            if(response.status == 200 && response.data.code==1000){
                //success
                MessageBox('提示', '保存阵容成功');
            }else{
                let errmsg =  '保存失败';
                if(response.data.msg){
                   errmsg =  response.data.msg;
                }
                Toast({
                  message: errmsg,
                  position: 'bottom',
                  duration: 3000
                });
            }
        });
    }
  }
};
</script>
<style>
#app{
  text-align: left;
  background: #f8f8f8;
}
.tab-content{
    margin-top: 15px;
}
.category{
  justify-content: center;
  background: #f8f8f8;
}
.category .mint-tab-item{
  width:80px;
  flex:none;
  border: 2px solid #26a2ff;
  padding: 8px;
  margin: 0px;
}
.category .mint-tab-item:last-child {
    border-right: 2px solid #26a2ff;
}
.category .mint-tab-item.is-selected {
    color:#ffffff;
    background: #26a2ff;
    margin: 0px;
}
.goods-list{display: flex;flex-direction: row;}
.goods-item{    
    width: 25px;
    height: 25px;
    background: #cccccc;
    margin: 6px;
    line-height: 25px;
    text-align: center;
}
.goods-item .img{
  width:25px;
  height:25px;
}
.goods-repet{
  color:#e0e0e0;
  opacity: 0.4;
}

.hero-list{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  }
.hero-item{    
    width: 50px;
    height: 50px;
    background: #cccccc;
    margin: 8px;
    line-height: 50px;
    text-align: center;
    cursor:pointer;
}
.hero-sel{background:#999990}
</style>
